<template>
  <div class="container">
    <div class="background-image"></div>
    <div class="content">
      <el-container>
        <el-header class="custom-header">宠物日记</el-header>
        <el-main class="custom-main">
          <el-button class="generate-diary-button" type="primary" @click="generateDiary">生成新日记</el-button>
          <div class="diary-container">
            <el-card v-for="(diary, index) in sortedDiaries" :key="diary.id" class="diary-entry">
              <div class="diary-header">
                <div class="diary-date">日记 {{ sortedDiaries.length - index }}</div>
                <el-button type="text" @click="toggleExpand(diary)">
                  {{ diary.expanded ? '收起' : '展开' }}
                </el-button>
              </div>
              <div class="diary-content">
                <div v-if="!diary.expanded">{{ diary.entry.slice(0, 100) }}...</div>
                <div v-if="diary.expanded">{{ diary.entry }}</div>
              </div>
            </el-card>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      diaries: [],
      petId: null
    };
  },
  computed: {
    sortedDiaries() {
      return this.diaries.slice().sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
    }
  },
  created() {
    const urlParams = new URLSearchParams(window.location.search);
    this.petId = urlParams.get('petId');
    this.fetchDiaries();
  },
  methods: {
    fetchDiaries() {
      const token = localStorage.getItem('token');
      axios.get(`/api/chat/diaries/${this.petId}`, {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      })
      .then(response => {
        this.diaries = response.data.map(diary => ({
          ...diary,
          expanded: false
        }));
      })
      .catch(error => {
        console.error("获取日记失败:", error);
      });
    },
    generateDiary() {
      const token = localStorage.getItem('token');
      axios.post(`/api/chat/generateDiary/${this.petId}`, {}, {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      })
      .then(response => {
        this.fetchDiaries();
      })
      .catch(error => {
        console.error("生成日记失败:", error);
      });
    },
    toggleExpand(diary) {
      diary.expanded = !diary.expanded;
    },
    formatDate(date) {
      return new Date(date).toLocaleString();
    }
  }
};
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  min-height: 100vh; /* 确保容器高度随内容变化 */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 使内容从顶部开始对齐 */
  background-color: #000; /* 备用背景颜色 */
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/background.jpg'); /* 使用相对路径引入图片 */
  background-size: cover; /* 确保背景图片覆盖整个容器 */
  background-repeat: no-repeat;
  background-attachment: fixed; /* 背景图片随页面滚动 */
  background-position: center;
  opacity: 0.8; /* 根据需要调整透明度 */
}

.content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 20px;
}

.custom-header {
  background-color: rgba(245, 245, 245, 0.9);
  text-align: center;
  font-size: 24px;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.custom-main {
  padding: 20px;
  background-color: rgba(249, 249, 249, 0.9);
}

.diary-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.diary-entry {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.diary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.diary-date {
  font-weight: bold;
  color: #666;
}

.diary-content {
  color: #333;
  line-height: 1.6;
  white-space: pre-wrap;
}

.el-button {
  color: #fff; /* 确保按钮文本颜色为白色 */
  font-size: 14px;
}

.diary-header .el-button[type="text"] {
  color: #409EFF !important; /* 始终显示蓝色 */
}

.diary-header .el-button[type="text"]:hover,
.diary-header .el-button[type="text"]:focus,
.diary-header .el-button[type="text"]:active {
  color: #409EFF !important; /* 在悬停、点击等状态下也显示蓝色 */
}

.generate-diary-button {
  display: inline-block;
  margin-bottom: 20px;
  color: #fff; /* 确保按钮文本颜色为白色 */
}
</style>
